import React, { Component,createRef } from 'react'

export default class App extends Component {
    state = {
        username:'atguigu',
        pwd:'123123'
    }

    changeUsername(e){
        this.setState({
            username: e.target.value
        })
    }
    changePwd(e){
        this.setState({
            pwd: e.target.value
        })
    }

    submitHandler(e){
        // 阻止默认行为
        e.preventDefault();
        console.log('username: ', this.state.username);
        console.log('pwd: ', this.state.pwd);
    }
    render() {
        /**
         * 受控组件【表单元素来说的】
         * 表单元素的值，收到了状态数据的控制，称为受控组件
         * 如何受控？ 将value 绑定了 state就会受控，表单的值无法改变，如何能够让用户输入呢？获取用户输入的最新的值，用这个值改变状态数据即可
         * 
         * 1. 如何将状态数据，渲染到表单元素
         * 
         * 2. 如何获取用户输入的最新的表单元素数据
         */

        let {username, pwd} = this.state;
        return (
            <div>
                <h3>受控组件</h3>
                <form action="" onSubmit={this.submitHandler.bind(this)}>
                    用户名：<input type="text" name="" id="" onChange={this.changeUsername.bind(this)} value={username}/><br />
                    密码： <input type="text" name="" id="" onChange={this.changePwd.bind(this)} value={pwd}/><br />
                    <button>保存</button>
                </form>
            </div>
        )
    }
}
